<template>
  <scroll-view  class="scroll-view" scroll-y  refresher-enabled="true" :refresher-triggered="refresh" @scrolltolower="onRefresh">
    <view class="shop-list-data" v-if="custList != null && custList.length != 0">
      <view class="item" v-for="item in custList" :key="item">
        <view class="head" style="background-color: rgb(255 255 255 / 0%)">
          <image class="avatar" :src="item.nocUserEntity.logo" mode="widthFix" />
          <view class="info">
            <view class="title">
				<view class="companyName">
					{{item.nocUserEntity.company?item.nocUserEntity.company.substring(0,20):''}}
				</view>
				<view class="btn" @click="toShowroom(item.nocUserEntity.id)">进店</view>
            </view>
            <view class="attr">
              <view v-if="item.nocUserEntity.companyNature != null" class="tag">{{item.nocUserEntity.companyNature}}</view>
              曝光
              <view class="interval">{{item.nocCompanyDataVo.visitCount}}</view>
              对接用户
              <view class="interval">{{item.nocCompanyDataVo.contactUserCount}}</view>
              活跃
              <view class="interval">{{item.nocUserEntity.score}}%</view>

            </view>
            <view class="grey" style="width: 500rpx; overflow: hidden;text-overflow: ellipsis;white-space: nowrap;color: #A1A0A0;">主营:
              <view class="cls" v-for="(cls,index) in item.classifys" :key="cls" style="position: relative;display: inline"><block v-if="index>0">|</block>&nbsp;{{cls}}&nbsp;</view>
            </view>

            <!--所属展会标签-->
            <view class="main" v-for="(ee,index) in item.exhibitionEntity" style="position: relative;">
              <view :style="{background:(ee.fontBackgroundColor?ee.fontBackgroundColor:'#EBEDFF'),opacity: 0.2, borderRadius: '30rpx'}">
                <view style="padding:0 10rpx 0 10rpx;" :style="{color:(ee.fontColor ? ee.fontColor:'#6A76FF'),opacity: 1}">{{ee.exhibitionShortName}}</view>
              </view>
              <view style="position:absolute;top:0px;padding:0 10rpx 0 10rpx;" :style="{color:(ee.fontColor ? ee.fontColor:'#6A76FF'),opacity: 1}">{{ee.exhibitionShortName}}</view>
            </view>

          </view>
        </view>
        <view class="list">
          <navigator class="url" v-for="dd in item.productEntities" :key="dd.id" @click="toProductDetail(dd.id)">
            <image class="img" :src="dd.banarImg" mode="widthFix" />
          </navigator>
        </view>
      </view>
	  <hint ref="hint"></hint>
    </view>
	<view v-else style="text-align:center;padding-top:210rpx">
		<image style="width: 305rpx;height: 245rpx;margin-bottom: 15rpx;" src="https://m.nocexpo.com/statics/js/modules/h5/img/wu.png"/>
		<view>暂无内容哦~</view>
	</view>
  </scroll-view>

</template>

<script>
import request from '@/utils/request/index.js';
export default {
  name: "CustList",
  props: ['searchKey'],
  onLoad:function(ops){

  },
  watch:{
    searchKey(val){
      this.search.searchKey=val;
      this.searchCust(1);

    }

    },

    data() {
		return {
			loading:false ,
			search: {
			searchKey: '',
			page: 1,
			totalPage:1,
			limit: 10
			},
			custList:[],
			isMoule: false
		};
  },
  mounted() {
    this.searchCust(1);
  },
  methods: {
    handleConditionOpen(type) {
      this.isMoule = true;
      this.type = type;

    }
    ,
    /**
     * 查询商家
     * */
    searchCust(page){
      if(this.loading){
        return;
      }else{
        this.loading=true;
      }
      if(page){
        this.search.page=page;
      }
      request.request({url:'/h5/noccloudhome/list',data:{
          search: this.searchKey,//搜索关键字
          page: this.search.page,//页码
          limit: this.search.limit,//页面大小
        },allResult:true}).then(e=>{
        let data = JSON.parse(e.homeResult).page;
        this.search.totalPage=data.totalPage;
        let list = data.list;
        console.log(list);

        if(this.search.page ==1){
          this.custList = list;
        }else{
          this.search.page++;
          this.custList =[...this.custList,...list];
        }
        if(this.search.page<this.search.totalPage){
          this.search.page=this.search.page+1;
        }
        this.loading=false;
      });

    },handleTap: function () {
      console.log("子组件到底了");
      // 在这里触发自定义事件，将事件传递给父组件
      this.triggerEvent('handleTap', { message: 'Hello' })
    },onReachScollBottom(){
      console.log("hahahah");
	  this.$refs.hint.setStatus('loadingComplete');
    },onRefresh() {
      this.refresh= true;
	  this.$refs.hint.setStatus('loading');
      console.log("我到底了");
      this.searchCust();
      // 这里不能直接让refresh直接为false，否则可能会发生下拉加载无法复位的情况
      setTimeout(() => {
        this.refresh = false;
      }, 500)
    },
	toShowroom(id){
		uni.redirectTo({
			url:'/pages/product/showroom/showroom?userId=' + id
		})
	},
	toProductDetail(productId){
		uni.redirectTo({
			url:'/pages/product/productDetail/productDetail?productId=' + productId
		})
	}
  }
};
</script>
<style lang="scss">
	.companyName{
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		width: 75%;
	}
</style>
